<template>
  <div>
    <h2>IPSec VPN 服务器</h2>
    <div class="title_tips">使用iOS 或者 Andriod (IKEv1 with PSK and Xauth) 原生内置 IPSec VPN 客户端进行连接</div>
    <div>
      <el-card style="padding-left:0px">
        <span style="color: red;text-align:left">IPSec VPN 未运行</span>
      </el-card>
      
    </div>
    <div>
      <el-card>
        <div style="padding-left: 80px;">
          <!-- <div style="margin: 20px;"></div> -->
          <el-form ref="form" :model="form" label-width="200px">
            <el-form-item label="启用">
              <el-checkbox v-model="form.checked" style="margin-top:0px"></el-checkbox>
              <!-- <el-input v-model="formLabelAlign.name"></el-input> -->
            </el-form-item>
            <el-form-item label="VPN客户端地址段">
              <el-input v-model="form.address" style="width:240px"></el-input><br/>
              <span class="tips1"><i class="el-icon-question"></i>VPN客户端使用DHCP保留空余IP的起始地址，必须和路由器LAN同一个子网掩码，例如 192.168.0.10/24</span>
            </el-form-item>
            <el-form-item label="VPN客户端DNS服务器">
              <el-input v-model="form.port" style="width:240px"></el-input><br/>
              <span class="tips1"><i class="el-icon-question"></i>指定VPN客户端的DNS地址。推荐设置为路由器的LAN IP，例如 192.168.0.1</span>
            </el-form-item>
            <el-form-item label="账户">
              <el-input v-model="form.dom" style="width:240px"></el-input>
            </el-form-item>
            <el-form-item label="密码">
              <!-- <el-input v-model="form.seg1" type="password">
                <i slot="suffix" class="el-icon-view" @click="showPwd"></i>
              </el-input>
              <el-input v-model="form.seg2" type="password" class="pwd2">
                <i slot="suffix" class="el-icon-view" @click="showPwd"></i>
              </el-input> -->
              <!-- <el-input v-model="form.pwd" :type="pwdType"></el-input>
              <el-button @click="changeShow">隐藏👁</el-button> -->
              <el-row >
                <el-col :span="8">
                  <el-input v-model="form.pwd" :type="pwdType"></el-input>
                </el-col>
                <el-col :span="12">
                    <el-button @click="changeShow">隐藏👁</el-button>
                </el-col>
              </el-row>
            </el-form-item>
            <el-form-item v-if="visible" label="PSK密钥">
              <!-- <el-input placeholder="请输入密码" v-model="form.pwd"><i slot="suffix" class="el-icon-view" @click="showPwd"></i></el-input> -->
              <!-- <el-input  name="psd1" :type="type" class="password1" v-model="form.pwd1" maxlength="10"> -->
                <!-- <i slot="suffix" class="el-icon-view" @click="showPwd" style="margin-left:10px"></i> -->
              <!-- </el-input> -->
              <!-- <el-input  name="psd2" type="text"  class="password2" v-model="form.pwd2" maxlength="10">
                <i slot="suffix" class="el-icon-view" @click="showPwd"></i>
              </el-input> -->
              <!-- <el-input v-model="form.pwd1" :type="pwdType"></el-input>
              <el-button @click="changeShow">隐藏👁</el-button> -->
              <el-row >
                <el-col :span="8">
                  <el-input v-model="form.pwd1" :type="pwdType"></el-input>
                </el-col>
                <el-col :span="12">
                  <el-button @click="changeShow">隐藏👁</el-button>
                </el-col>
              </el-row>
            </el-form-item>
          </el-form>
          
          <div>
            <!-- <el-button @click="download" class="el-button-color add-button-box" size="medium" type="primary"> -->
            
          </div>
        </div>
        
      </el-card>
    </div>
    <div class="button">
      <el-button class="saveOrUpdate">保存&应用</el-button>
      <el-button class="save">保存</el-button>
      <el-button class="init">复位</el-button>
    </div>
  </div>
</template>

<script>
import Vue from 'vue';
export default {
  data() {
    return {
      // labelPosition: 'right',
      form: {
        checked: "false",
        address: '192.168.0.10/24',
        port: '192.168.0.1',
        dom: 'lean',
        pwd1: "myopenwrt", 
        seg: "",
        pwd: "12345678"
      },
      pwdType:"password",
      input: '',
      arrayData:[
					{
						id:"",
						data:"myopenwrt"
					}
				],
			dataNum:0,
      formPassword: {
        newPassword: ''
      },
      visible: true,
      type: 'text'
    };
  },
  methods: {
    deletd(id){
		        // if(this.arrayData.length<=1){ //如果只有一个输入框则不可以减
		        //   return false
		        // }
		        // this.arrayData.splice(index,1)//删除了数组中对应的数据即将这个位置的输入框删除
      for(let i=0; i < this.form.push.length; i++) {
        if(this.form.push[i].id == id) {
          this.form.push.splice(i, 1);
          break;
        }
      }
    },
    add(){
        // this.arrayData.push(//增加即push进数组一个新值
        //   {
        //     id:this.dataNum++,
        //     data:''
        //   }
        // )
      this.form.push[this.form.push.length-1].isLast = false
      this.form.push.push({id:this.form.push[this.form.push.length-1].id + 1, value:'', isLast: true})
    },
  changeShow() {
    this.pwdType = this.pwdType === 'password' ? 'text' : 'password'
  }
  },
}
</script>

<style scope>
.title_tips,
.tips {
  padding: 0.5rem;
  color: #999;
  font-size: small;
}
/* .el-input__inner{
  width: 280px;
} */

.tips1 {
  padding: 0.5rem;
  color: #999;
  font-size: small;
}
/* .el-card{
  padding-left: 100px;
} */
.tips {
  margin-left: 190px;
}
.el-checkbox {
  padding-left: 20px;
  margin-top: 15px;
  color: #999;
  font-size: small;
}
.button {
  float: right;
  margin-top: 15px;
}
.pwd2{
  display: none;
}
.password2 {
      /* 初始状态下默认隐藏第二个输入框 */
  display: none;  
}
.saveOrUpdate {
  background: #50448f;
  color: #fff;
}
.save {
  background: #8b66f3;
  color: #fff;
}
.init {
  background: #2cca86;
  color: #fff;
}
</style>